<template>
	<view class="container" @tap="Playbjmusic">
		<view class="hader">
			<view class="hader_icon">
				<view class="music" v-show="isPlaying==false" @tap="fasletogglePlay"></view>
				<view class="music1" v-show="isPlaying==true" @tap="truetogglePlay"></view>
				<view class="music2" @tap="openservicepopup"></view>
				<view class="music3" @tap="rulepopupopen"></view>
			</view>
			<view class="GameCoins">GameCoins：{{ gold_coin }}</view>
		</view>
		<!-- 轮播的弹幕 -->
		<view class="scrolling">
			<l-barrage 
				:defer="0.8"
				:speed="6"
				:trackHeight="32"
				:data="run">
				<template #default="{content}">
					<view class="bullet">{{content.text}}</view>
				</template>
			</l-barrage>
		</view>
		<view class="main"> 
			<!-- 轮播主体 -->
			<view class="swiper">
				<swiper class="swiper" circular :indicator-dots="false" @change="swiperchange" :current="swipercurrent" :autoplay="false" :interval="3000"
				:duration="500">
					<swiper-item class="swiper_item" v-for="(item,index) in PrizePool">
						<image class="item_img" :src="item.goods_img" :lazy-load="true"></image>
					</swiper-item>
				</swiper>
				<image class="left" @tap="swipertleft" src="../../static/images/左图标@3x.png"></image>
				<image class="right" @tap="swipertright" src="../../static/images/右图标@3x.png"></image>
			</view>
			<!-- 底座 -->
			<view class="base">
				<view class="schedule">{{(swipercurrent + 1) + ' / '+  PrizePool.length }}</view>
				<view class="money">{{swiperitem.all?'':'$' }}{{ swiperitem.goods_price }}</view>
			</view>
			<view class="DetailedIntroduction">{{ swiperitem.english_desc }}</view>
		</view>
		<!-- 大类型选择 -->
		<view class="bigtype">
			<tiner-swiper-loop :itemSelectBig="true" :itemW="itemSize[0]" :itemH="itemSize[1]" 
			@send-data="handleDataFromChild" :items="tabs" :excessCount="4">
				<template v-slot="{item,index}">
					<view class="item-parent" :style="{'width': itemSize[0] + 'px','height': itemSize[1] + 'px'}">
						<image class="img" :src="item.box_img" :lazy-load="true"></image>
						<view :class="item.id != tittypeid ?'item-sub':'item-subtwo'">{{item.type_name}}</view>
					</view>
				</template>
			</tiner-swiper-loop>
		</view>
		<view class="buttoms">
			<!-- @touchstart="buttonScaleDown"
				@touchend="buttonScaleUp"
				@touchcancel="buttonScaleUp" -->
			<view class="testPrizeDraw" @tap="testonluckDraw">Test</view>
			<view class="testMark">{{ testdrawcount }}</view>
			<view class="PrizeDraw" @tap="onluckDraw">Start</view>
			<view class="PrizeDrawMark">
				<image class="PrizeDrawMarkimg" src="../../static/images/gold.png"></image>
				<view class="text">{{ LotteryAmount }}</view>
			</view>
		</view>
		<!-- 抽奖弹框 -->
		<uni-popup ref="luckdrawpopup" style="z-index: 9999;">
			<view class="luckdrawcss">
				<!-- <view class="gifimg" v-show="isgif.isgifone"></view> -->
				<view class="roll">
					<chouJiang
						ref="lottryRef" 
						:itemW="lotteryItemSize[0]" 
						:itemH="lotteryItemSize[1]" 
						:items="PrizePooldraw" 
						:aTime="5" 
						:isLottry="true"
						:excessCount="0" 
						:defulid="jackpotindex"
						:disableTouch="true">
						<template v-slot="{item,index}">
							<view class="item-lottry">  
								<view class="itemcenter" :style="{backgroundImage: 'url(https://h5.uubox.one/images/' + item.value_class + '.png)',backgroundSize: '100% 100%',}">
									<image class="img1" :src="item.goods_img"></image>
									<view class="text">{{ item.english_desc }}</view>
									<view class="usamoney">${{ item.goods_price }}</view>
								</view>
							</view>
						</template>
					</chouJiang>
				</view>
				<view class="countDown"><span>{{ countDow }}</span> s  STOP SCROLLING</view>
				<!-- <image class="close" @tap="closeluckdrawpopup" src="../../static/images/close2.png"></image> -->
			</view>	
		</uni-popup>
		<!-- 中奖弹框 -->
		<uni-popup ref="Winningpopup" style="z-index: 9999;">
			<view class="Winningpopup">
				<view class="Prizename">Have won a prize</view>
				<view class="Prizeitem">
					<view class="Prizeimg">
						<image class="img" :src="Winningjackpot.goods_img"></image>
					</view>
					<view class="Prizesdetil">{{ Winningjackpot.goods_name }}</view>
				</view>
				<view class="explain" v-show="istestdraw">The test results are for reference only</view>
				<view class="confirm" @tap="closeWinningpopup">{{ istestdraw ?'Official start':'Accept the prize'  }}</view>
				<image class="close" @tap="closeWinningpopup" src="../../static/images/close2.png"></image>
			</view>
		</uni-popup>
		<!-- 金币不足 -->
		<uni-popup ref="insufficientpopup">
			<view class="insufficientpopup">
				<view class="plaque"></view>
				<view class="title">Select the game currency recharge</view>
				<view class="product">
					<view :class="item.id == defaultid.id?'product_item active':'product_item'" v-for="(item,index) in productlist" :key="index" @tap="changechoice(item)">
						<view class="GoldCoins">
							<image class="gold" src="../../static/images/gold.png" :lazy-load="true"></image>
							<view class="goldtext">{{ item.gold_coin }}</view>
						</view>
						<view class="money">${{ item.new_money/100 }}</view>
					</view>
				</view>
				<view class="accept" @tap="topay">Buy</view>
				<image class="close" @tap="closeinsufficientpopup" src="../../static/images/close2.png"></image>
			</view>
		</uni-popup>
		<!-- 规则 -->
		<uni-popup ref="rulepopup">
			<view class="rulepopup">
				<view class="plaque">Rule Description</view>
				<view class="scllow">
					<view class="RuleSubclass">Please login and purchase game coins before the draw begins;</view>
					<view class="RuleSubclass">A: How do I draw the prize?</view>
					<view class="RuleSubclass">1, Select the prize type at the top of the home page, click the draw button below, you can play the draw game, and consume the balance of the game currency in the account;</view>
					<view class="RuleSubclass">2, Draw 100% of the prize to get goods, the obtained goods can be viewed in the "winning record";</view>
					<view class="RuleSubclass">3, the obtained goods can choose the address and wait for express delivery;</view>
					<view class="RuleSubclass">B: About redemption of prizes?</view>
					<view class="RuleSubclass">1. For the goods you do not want, you can click "Exchange" game currency in "Winning Record", and the exchanged game currency will be automatically recharged into your account. Once the exchange is successful, it cannot be cancelled;</view>
					<view class="RuleSubclass"> One: How to draw the prize?</view>
					<view class="RuleSubclass">1, Select the prize type at the top of the home page, click the draw button below, you can play the draw game, and consume the balance of the game currency in the account;</view>
					<view class="RuleSubclass">2, Draw 100% of the prize to get goods, the obtained goods can be viewed in the "winning record";</view>
					<view class="RuleSubclass">3, the obtained goods can choose the address and wait for express delivery;</view>
					<view class="RuleSubclass">Two: About the redemption of prizes?</view>
					<view class="RuleSubclass">1. For the goods you do not want, you can click "Exchange" game currency in "Winning Record", and the exchanged game currency will be automatically recharged into your account. Once the exchange is successful, it cannot be cancelled;</view>
				</view>
				<image class="close" @tap="closerulepopup" src="../../static/images/close2.png"></image>
			</view>
		</uni-popup>
		<!-- 联系客服· -->
		<uni-popup ref="servicepopup">
			<view class="kefu">
				<view class="plaque">Customer service</view>
				<view class="title">FaceBook：156415561511</view>
				<view class="accept" @tap="copyeamil">Copy account</view>
				<image class="close" @tap="closeservicepopup" src="../../static/images/close2.png"></image>
			</view>
		</uni-popup>
	</view>
</template>

<script>
//   import LuckyGrid from '../../components/@lucky-canvas/uni/lucky-grid'
  import chouJiang from '../../components/choujiang/choujiang.vue'
  import { getrequest, postrequest, EventStatistics } from '../../util/api'	
  import {showDialog,closeDialog} from '../../util/dialog'
  export default {   
		// 注册组件
		components: { chouJiang },
		data() { 
			return {
				userclickmusuc:true, //用户自己点击背景音乐
				isgif:{
					isgifone:false,
					isgiftwo:false
				}, //是否显示gif图片
				istestdraw:false, // 是否是测试抽奖
				testdrawcount:0, //测试抽奖次数
				countdownRunning: false, // 倒计时是否正在运行
				countdownInterval: null, // 保存定时器引用
				countDow:6, // 抽奖转动的倒计时
				isshouallimg:true, //控制第一张图片要不要显示
				jackpotindex:0, // 抽奖中的id
				link:'',
				ispay:false, //防重复点击
				defaultid:{}, //选中的产品
				productlist:[], //产品
				bjmusicswith:false, // 控制背景音乐初次进入的开关
				Inlottery:false, //是否禁用抽奖
				tittypeid:'', //选中的列表的id
				Winningjackpot:{}, //中奖的对象
				PrizePooldraw:[], //奖池 全部
				PrizePool:[], // 轮播图奖品池
				gold_coin:'', //我的金币余额
				LotteryAmount:'', //抽奖需要的金额
				channel_no:'', //渠道号
				token:'', //登录token
				tabs: [],  //大类型
				// 音乐相关配置
				isPlaying: false,  //背景音乐是否关闭或者开启
				music: uni.createInnerAudioContext(),
				musicone: uni.createInnerAudioContext(),
				musictwo: uni.createInnerAudioContext(),
				// 跑马灯
				run:[],
				// 轮播图
				swipercurrent:0,//   详情轮播图的下标
				swiperitem:{}, // 轮播图正在展示的奖品
				PrizeType:{}, // 产品选中的大类型
			}
		},
		computed:{
			// 以下三个是配置大类型的大小
			itemSize(){
				let height = uni.upx2px(220);
				let width = uni.upx2px(220);
				return [width,height];
			},
			lotteryItemSize(){
				let height = uni.upx2px(660);
				let width = uni.upx2px(500);
				return [width,height]; 
			}
		},
		onLoad(option){
			console.log('onLoad',option)
			// 获取渠道号
			this.channel_no = uni.getStorageSync('channel_no') || ''
			// 如果本地缓存获取不到渠道号并且链接上带的有渠道号
			if(!this.channel_no&&option.channel_no){
				this.channel_no = option.channel_no
				this.link = window.location.href
				uni.setStorageSync('channel_no',option.channel_no)
				uni.setStorageSync('href',window.location.href)
			}
			// 判断是不是授权登录带回来的token
			if(option.token){
				uni.setStorageSync('token',option.token)
			}
			this.link = uni.getStorageSync('href') || ''
			// 请求抽奖title类型
			this.getLotteryType()
			// 请求用户数据
			this.getuserDetails()
			//请求跑马灯接口
			this.getrun()
			// 事件统计
			EventStatistics('首页 ','访问数')
			this.testdrawcount = uni.getStorageSync('testcount') || 3;
		},
		onShow(){
			// 请求用户数据
			// this.getuserDetails()
		},
		onReady(){
			this.token = uni.getStorageSync('token') ||''
			if(!this.token){
				// 弹出登录弹框
				showDialog(
				// 	() => {
				// 	// 请求用户详情
				// 	this.getuserDetails()
				// }
				)
			}else{
				// 请求用户详情
				 this.getuserDetails()
			}
			setTimeout(()=>{
				// 播放背景音乐
				// this.togglePlay()
			},1000)
			// this.$refs.luckdrawpopup.open('center')
		},
		// 页面隐藏
		onHide(){
			console.log('页面隐藏',)
			// 关闭背景音乐
			if(this.music._stoping == false){
				this.music.stop();
			}
			this.isPlaying = false;
			// 背景音乐阀门重置
			// this.bjmusicswith = false
			// 关闭所有弹框
			this.closeWinningpopup()
			this.closeinsufficientpopup()
			this.closerulepopup()
			this.closeluckdrawpopup()
		},
		methods: {
			// 切换大类型
			handleDataFromChild(data){
				console.log('shodaol',data)
				// 每次切换大类型都显示i聚合图片
				this.isshouallimg = true
				this.tabs.forEach((item,index)=>{
					if(data == index){
						// 选中的奖品类型
						this.PrizeType = item
						this.LotteryAmount = item.cost_gold	// 每次消耗的金币
					
						this.getprize(item.id)
						console.log('id',this.tittypeid)
					}
				})
				// 弹出登录弹框弹框
				if(!this.token){
					showDialog()
				}
			},
			// 进入首页点击播放背景音乐
			Playbjmusic(){
				if(this.bjmusicswith){
					return
				}
				this.bjmusicswith = true
				// 打开音乐
				this.togglePlay()
			},
			// 用户手动点击关闭开启背景音乐
			fasletogglePlay(){
				this.userclickmusuc = true
				// 打开音乐
				this.togglePlay()
			},
			truetogglePlay(){
				this.userclickmusuc = false
				// 打开音乐
				this.togglePlay()
			},
			// 点击播放背景音乐
			togglePlay() {
				if (this.isPlaying) {
					this.music.stop();
					this.isPlaying = false;
				} else {
					this.music.src = '../../static/mp3/盲盒背景音乐.MP3'; // 替换成你的音乐文件路径
					this.music.volume = 0.4
					this.music.loop = true
					// this.music.autoplay = true
					this.music.play();
					this.isPlaying = true;
				}
				console.log('this.music',this.music)
			},
			// 未登录跳转到我的页面
			tomy(){
				uni.switchTab({
					url: '/pages/my/my'
				})
			},
			// 请求奖品 
			async getprize (id) {
				this.tittypeid = id
				let params = {
					type_id:id,
				}
				const res = await getrequest('/api/prize/prize_list',params)
				console.log('请求奖品',res)
				if( res &&res.code == 200){
					this.PrizePooldraw = [...res.data]//奖品池
					this.PrizePool = res.data  //轮播池
					const obj = {
						goods_img:this.PrizeType.aggregate_img,
						goods_price: this.PrizeType.type_name,
						english_desc:'Click the "Start" button below to start the draw',
						all:true,
					}
					this.PrizePool.unshift(obj)
					this.swipercurrent = 0
					this.swiperitem = this.PrizePool[this.swipercurrent]
				}
			},
			// 请求抽奖类型
			async getLotteryType(){
				let params = {}
				const res = await getrequest('/api/prize/type_list',params)
				console.log('请求抽奖类型',res)
				if( res &&res.code == 200){
					this.tabs = res.data
					this.tabs.forEach((item,index) => {
						if(item.default_select == 1){
							// 选中的奖品类型
							this.PrizeType = item
							// 选中的奖品类型
							this.tittypeid = item.id
							this.LotteryAmount = item.cost_gold
							this.PrizePooldraw = [...item.prize_list] //奖品池
							this.PrizePool = item.prize_list //轮播池
							const obj = {
								goods_img:this.PrizeType.aggregate_img,
								goods_price: this.PrizeType.type_name,
								english_desc:'Click the "Start" button below to start the draw',
								all:true,
							}
							this.PrizePool.unshift(obj)
							this.swiperitem = this.PrizePool[this.swipercurrent]
							console.log('item.PrizePool',this.PrizePool)
						}
					});
				}
			},
			// 请求用户数据
			async getuserDetails(){
				let params = {}
				const res = await getrequest('/api/user/user_info',params)
				console.log('用户信息',res)
				if( res &&res.code == 200){
					this.gold_coin = res.data.gold_coin
					console.log('我的金币',this.gold_coin)
				}
			},
			// 跳转到购买金币弹框
			topayjb(){
				// 关闭金币弹框
				this.closeinsufficientpopup()
				uni.navigateTo({
					url:'/pages/payvip/payvip'
				})
			},	
			// 点击测试抽奖
			testonluckDraw(){ 
				// 弹出登录弹框弹框
				if(!this.token){
					showDialog()
				}
				// 是否正在抽奖
				if(this.Inlottery){
					return
				}
				// 判断有没有抽奖机会 0是灭有抽奖机会
				if(this.testdrawcount <= 0){
					return uni.showToast({
							title: 'No experience times currently available',
							icon:'none',
						});
				}
				// 禁止调用抽奖
				this.Inlottery = true
				// 显示结果的时候显示测试抽奖
				this.istestdraw = true
				// 抽奖中的奖品
				this.jackpotindex = parseInt(Math.random()*this.PrizePooldraw.length);
				this.Winningjackpot = this.PrizePooldraw[this.jackpotindex]
				// 弹出弹框
				this.StartLottery()
				// 接口返回失败解开禁用状态
				this.Inlottery = false
				// 体验过之后
				this.testdrawcount --
				uni.setStorageSync('testcount',JSON.stringify(this.testdrawcount))
			},
			// 点击抽奖
			async onluckDraw(){
				// 弹出登录弹框弹框
				if(!this.token){
					showDialog()
				}
				if(this.Inlottery){
					return
				}
				// 禁止调用抽奖
				this.Inlottery = true
				let params = {
					type_id: this.tittypeid
				}
				const res = await postrequest('/api/prize/prize_draw',params)
				console.log('请求奖品',res)
				if(res &&res.code == 200){
					this.gold_coin = Number(this.gold_coin) - Number(this.LotteryAmount)
					// 抽奖中的奖品
					this.Winningjackpot = res.data
					// 遍历出中奖下标传给组件
					this.PrizePooldraw.forEach((item,index)=>{
						if(item.id == this.Winningjackpot.id){
							this.jackpotindex = index
							console.log('中奖的下标',index)
						}
					})
					// 弹出弹框
					this.StartLottery()
					// 事件统计
					EventStatistics('首页','开始抽奖')
					// 接口返回失败解开禁用状态
					this.Inlottery = false
				}else if(res &&res.code == 0){
					// 弹出购买金币弹框
					this.insufficientpopupopen()
					// 接口返回失败解开禁用状态
					this.Inlottery = false
				}else{
					// 接口返回失败解开禁用状态
					this.Inlottery = false
					uni.showToast({
						title: res.message,
						icon: 'none',
						//显示持续时间为 2秒
						duration: 2000 
					})
				}
			},
			// 点击开始抽奖
			StartLottery (){
				// 抽奖动画弹框
				 this.openluckdrawpopup()
				// 打开中奖弹框
				setTimeout(() => {
					// 打开中奖弹框
					this.Winningpopupopen()
					// 关闭旋转弹框
					this.closeluckdrawpopup()
					// 打开中奖音乐
					this.musictwo.src = '../../static/mp3/奖励弹出音效.mp3'; // 替换成你的音乐文件路径
					this.musictwo.volume = 0.6
					this.musictwo.play();
					// 接口返回失败解开禁用状态
					this.Inlottery = false
				}, 6200)
				// 关闭中奖音乐
				setTimeout(() => {
					// 关闭中奖音乐
					this.musictwo.stop();
				}, 3000)
			},
			// 请求产品
			async getproduct(){
				let params = {
					channel_no:this.channel_no,
				}
				const res = await getrequest('/api/product/list',params)
				console.log('产品',res)
				if( res &&res.code == 200){
					this.productlist = res.data
					this.defaultid = this.productlist[0]
				}
			},
			// 改变选中的购买产品
			changechoice(item){
				this.defaultid = item
			},
			// 点击支付
			async topay(){
				// 防重复点击
				if(this.ispay){
					return
				}
				// 事件统计
				EventStatistics('首页','金币弹窗购买按钮')

				this.ispay = true
				// 处理一下穿过去的首页链接
				const url = uni.getStorageSync('href')
				const htmlIndex = url.indexOf('.html');
				// 如果找到了 .html，则截取之前的部分，否则保持原样
				const newUrl = htmlIndex !== -1 ? url.slice(0, htmlIndex + 5) : url;
				const processedUrl = newUrl + '#/pages/result/result'
				// uni.setStorageSync('backcideoUrl',backcideoUrl)
				uni.showToast({
					title: 'In payment...',
					icon: 'none',
					//显示持续时间为 2秒
					duration: 2000 
				})
				let params = {
					product_id:this.defaultid.id,
					pay_type:'STRIPE',
					return_url:processedUrl,
					channel_no:this.channel_no,
					link:this.link,
					// sub_channel_no: this.sub_channel_no,
				}
		        const res = await postrequest('/api/order/create',params)
				console.log('创建订单',res)
				this.closeinsufficientpopup()
				if(res&&res.code == 200){
					// 关闭弹框
					this.closeinsufficientpopup()
					this.timer = setTimeout(()=>{
						this.ispay = false
					},3000)
					
					// 跳转
					window.location.href = res.data.payUrl
				}else{
					uni.showToast({
						title: res.message,
						icon: 'none',
						//显示持续时间为 2秒
						duration: 2000 
					})
				}
			},
			// 抽奖动画弹框
			openluckdrawpopup(){
				// 如果倒计时正在运行，直接返回
				if (this.countdownRunning) {
					return
				}
				// 关闭背景音乐
				if (this.isPlaying) {
					this.togglePlay()
				}
				// 抽奖转盘音效
				setTimeout(() => {
					// 打开中奖音乐
					this.musicone.src = '../../static/mp3/盲盒开始抽奖转动背景音乐.mp3'; // 替换成你的音乐文件路径
					this.musicone.volume = 0.6
					this.musicone.play();
				}, 500)
				// 关闭中奖音乐
				setTimeout(() => {
					// 关闭中奖音乐
					this.musicone.stop();
				}, 5500)
				// gif特效显示
				// setTimeout(()=>{
				// 	this.isgif.isgifone = true
				// },4500)

				// 更新倒计时状态和界面显示
				this.countdownRunning = true;
				this.countDow = 5;

				// 启动定时器，每秒更新倒计时
				this.countdownInterval = setInterval(() => {
					this.countDow--;
					if (this.countDow === 0) {
						clearInterval(this.countdownInterval);
						this.countdownRunning = false;
					}
				}, 1000);

				this.$refs.luckdrawpopup.open('center')
			},
			closeluckdrawpopup(){
				this.$refs.luckdrawpopup.close()
			},
			// 奖品显示弹框
			Winningpopupopen(){
				// 事件统计
				EventStatistics('首页--中奖弹窗', this.Winningjackpot.goods_name)
				this.$refs.Winningpopup.open('center')
			},
			closeWinningpopup(){
				// 显示结果的时候显示测试抽奖还原
				this.istestdraw = false
				this.$refs.Winningpopup.close()
				if(this.userclickmusuc){
					this.togglePlay()
				}else{
					this.music.stop();
					this.isPlaying = false;
				}
			},
			// 金币不足
			insufficientpopupopen(){
				// 事件统计
				EventStatistics('首页','金币不足弹框')
				// 请求产品
				this.getproduct()
				this.$refs.insufficientpopup.open('center')
			},
			closeinsufficientpopup(){
				this.$refs.insufficientpopup.close()
			},
			// 规则弹框
			rulepopupopen(){
				// 事件统计
				EventStatistics('首页','规则说明')
				this.$refs.rulepopup.open('center')
			},
			closerulepopup(){
				this.$refs.rulepopup.close()
			},
			// 联系客服
			openservicepopup(){
				this.$refs.servicepopup.open('center')
			},
			closeservicepopup(){
				this.$refs.servicepopup.close()
			},
			// 删除奖品第一个第一个
			deletefirstdraw(){
				// 删除第一个全部对象
				if(this.PrizePool[0].all&&this.PrizePool[0].all == true){
					this.PrizePool.shift();
					return
				}
			},
			// 点击向左切换轮播图
			swipertleft(){
				// this.deletefirstdraw()
				console.log('this.lbcurrent',this.swipercurrent)
				if(this.swipercurrent == 0){
					console.log('最后一个轮播图',this.PrizePool.length)
					this.swipercurrent = this.PrizePool.length - 1
				}else{
					
					this.swipercurrent = this.swipercurrent - 1
				}
				console.log('this.lbcurrent',this.swipercurrent)
				this.swiperitem = this.PrizePool[this.swipercurrent]  //改变展示的图片
			},
			// 点击向右切换轮播图
			swipertright(){
				// 删除第一个全部对象
				// this.deletefirstdraw()
				if(this.swipercurrent == (this.PrizePool.length - 1)){
					console.log('最后一个轮播图')
					this.swipercurrent = 0
				}else{
			
					this.swipercurrent = this.swipercurrent + 1
				}
				console.log('this.lbcurrent',this.swipercurrent)
				this.swiperitem = this.PrizePool[this.swipercurrent]  //改变展示的图片
			},
			// 轮播图改变
			swiperchange(e){
				// 删除第一个全部对象
				// this.deletefirstdraw()
				console.log('轮播图改变',e.detail.current)
				this.swipercurrent = e.detail.current //改变下标
				this.swiperitem = this.PrizePool[this.swipercurrent]  //改变展示的图片
			},
			// 跑马灯数据接口请求
			async getrun(){
				let params = {}
				const res = await getrequest('/api/prize/horse_race_lamp',params)
				console.log('中奖跑马灯',res)
				if( res &&res.code == 200){
					res.data.forEach((item,index)=>{
						const obj = {
							index:index,
							text:item,
						}
						this.run.push(obj)
					})
				}
			},
			// 点击按钮的效果
			buttonScaleDown(event) {
				// event.currentTarget.style.transform = 'scale(0.95)';
				console.log('event',event)
			},
			buttonScaleUp(event) {
				// event.currentTarget.style.transform = 'scale(1)';
				console.log('event2',event)
			},
			// 开始抽奖
			onStartDraw(){
				// console.log('PrizePool',this.PrizePool)
				//this.$refs.lottryRef.initLottryData();
				this.$refs.lottryRef.startDraw();
			},
			// 复制账号
			copyeamil(){
				const that = this
				uni.setClipboardData({
					data: '156415561511',
					success: () => {
						// 关闭弹框
						that.closeservicepopup()
						uni.showToast({
							title: 'Copy successful',
							icon:'none',
						});
					},
					fail: (error) => {
					// console.error('复制失败', error);
						uni.showToast({
							title: 'copy failed',
							icon: 'none'
						});
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.container {
		width: 100vw;
		max-width: 750rpx;
		min-height: calc( 100vh - 100rpx);
		margin: 0 auto;
		overflow: hidden;
		font-family: '思源黑体';
		background: url('../../static/images/bj.png') no-repeat;
		background-size: 100% 100%;
		.hader{
			width: 750rpx;
			height: 70rpx;
			padding-top: 40rpx;
			// border: 1px solid black;
			display: flex;
			justify-content: space-between;
			.hader_icon{
				width: 300rpx;
				height: 70rpx;
				display: flex;
				.music{
					width: 70rpx;
					height: 70rpx;
					background: url('../../static/images/music.png');
					background-size: 100% 100%;
					margin-left: 16rpx;
				}
				.music1{
					width: 70rpx;
					height: 70rpx;
					background: url('../../static/images/music1.png');
					background-size: 100% 100%;
					margin-left: 16rpx;
					animation: rotate 5s linear infinite; /* 使用CSS动画控制旋转 */
				}
				.music2{
					width: 70rpx;
					height: 70rpx;
					background: url('../../static/images/kefu.png');
					background-size: 100% 100%;
					margin-left: 10rpx;
				}
				.music3{
					width: 70rpx;
					height: 70rpx;
					background: url('../../static/images/gzsm.png');
					background-size: 100% 100%;
					margin-left: 10rpx;
				}
				@keyframes rotate {
					from {
						transform: rotate(0deg);
					}
					to {
						transform: rotate(360deg);
					}
				}
			}
			.GameCoins{
				// width: 260rpx;
				height: 50rpx;
				padding:0 30rpx;
				border-radius: 20px 0px 0px 20px;
				background: linear-gradient(90deg, rgba(187, 141, 203, 1) 0%, rgba(132, 81, 252, 1) 100%);
				border: 1px solid rgba(255, 255, 255, 1);
				box-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.25);
				font-size: 24rpx;
				line-height: 50rpx;
				color: rgba(255, 255, 255, 1);
			}
		}
		// 弹幕
		.scrolling{
			width: 750rpx;
			height: 140rpx;
			// border: 1px solid black;
			.bullet{
				height: 50rpx;
				border-radius: 50rpx;
				background: rgba(164, 126, 252, 0.3);
				padding: 0 30rpx;
				font-size: 24rpx;
				line-height: 50rpx;
				color: rgba(255, 255, 255, 1);
				// border: 1px solid black;
			}
		}
		// 中间的轮播图
		.main{
			width: 750rpx;
			height: 680rpx;
			border: 1px solid transparent;
			position: relative;
			.swiper{
				width: 750rpx;
				height: 420rpx;
				// border: 1px solid black;
				position: absolute;
				top: 0;
				z-index: 99;
				.swiper{
					width: 750rpx;
					height: 420rpx;
					.swiper_item{
						width: 750rpx;
						height: 420rpx;
						// background-color: pink;
						z-index: 3;
						.item_img{
							width: 410rpx;
							height: 400rpx;
							display: block;
							margin: 0 auto;
							margin-top: 20rpx;
							animation: shake 0.8s ease-in-out infinite alternate;
							z-index: 99;
						}
						@keyframes shake {
							0% {
								transform: translateY(0);
							}
							100% {
								transform: translateY(-10px);
							}
						}
					}
				}
				.left{
					width: 90rpx;
					height: 90rpx;
					position: absolute;
					top: 170rpx;
					left: 10rpx;
					z-index: 99;
				}
				.right{
					width: 90rpx;
					height: 90rpx;
					position: absolute;
					top: 170rpx;
					left: 650rpx;
					z-index: 99;
				}
			}
			.base{
				width: 750rpx;
				height: 250rpx;
				background: url('../../static/images/dizuo.png') no-repeat;
				background-size: 100% 100%;
				position: absolute;
				top: 340rpx;
				.schedule{
					width: 100rpx;
					height: 30rpx;
					border-radius: 30px;
					background: rgba(136, 96, 230, 0.3);
					font-size: 20rpx;
					line-height: 30rpx;
					color: rgba(255, 255, 255, 1);
					text-align: center;
					margin: 0 auto;
					margin-top: 100rpx;
				}
				.money{
					height: 750rpx;
					font-size: 36rpx;
					font-weight: 700;
					line-height: 50rpx;
					color: rgba(0, 0, 0, 1);
					padding: 0 20rpx;
					text-align: center;
					margin-top: 10rpx;
				}
			}
			.DetailedIntroduction {
				width: 660rpx;
				height: 50rpx;
				font-size: 28rpx;
				font-weight: 500;
				line-height: 50rpx;
				color: rgba(0, 0, 0, 1);
				text-align: center;
				margin: 0 auto;
				margin-top: 606rpx;
				overflow: hidden;
				white-space: nowrap; /* 禁止换行 */
				text-overflow: ellipsis; /* 超出部分显示省略号 */
			}
		}
		// 下方的大类型
		.bigtype{
			width: 750rpx;
			height: 310rpx;
			// background-color: pink;
			// border: 1px solid black;
			position: relative;
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			align-items: center;
			.item-parent{
				// display: flex;
				// justify-content: center;
				// align-items: center;
				// background: url('../../static/images/box1.png') no-repeat;
				background-size: 100%;
				// border: 1rpx solid white;
				// box-sizing: border-box;
				margin-top: 90rpx;
				.img{
					width: 160rpx;
					height: 160rpx;
					// border: 1px solid black;
					display: block;
					margin: 0 auto;
				}
				.item-sub {
					width: 200rpx;
					height: 84rpx;
					border-radius: 8px;
					background: linear-gradient(180deg, rgba(234, 223, 253, 1) 0%, rgba(243, 237, 255, 1) 99.31%);
					box-shadow: 2px 5px 1px  rgba(121, 72, 234, 0.25);
					margin: 0 auto;					
					margin-top: -50rpx;
					font-size: 20rpx;
					line-height: 130rpx;
					color: rgba(107, 63, 209, 1);
					text-align: center;
				}
				.item-subtwo{
					width: 200rpx;
					height: 92rpx;
					border-radius: 8px;
					background: linear-gradient(180deg, rgba(194, 194, 252, 1) 0%, rgba(205, 189, 247, 1) 100%);
					box-shadow: 2px 5px 1px  rgba(121, 72, 234, 0.25);
					margin: 0 auto;
					margin-top: -50rpx;
					font-size: 20rpx;
					line-height: 130rpx;
					color: rgba(107, 63, 209, 1);
					text-align: center;
				}
			}
		}
		// 开始抽奖按钮
		.buttoms{
			width: 750rpx;
			height: 150rpx;
			// border: 1px solid black;
			margin: 0 auto;
			margin-top: 20rpx;
			display: flex;
			position: relative;
			.testPrizeDraw{
				width: 120rpx;
				height: 120rpx;
				background: url('../../static/images/testbuttom.png') no-repeat;
				background-size: 100% 100%;
				margin: 30rpx 0 0 20rpx;
				font-size: 28rpx;
				font-weight: 700;
				line-height: 120rpx;
				color: rgba(210, 69, 39, 1);
				text-align: center;
				transition: transform 0.3s ease; /* 添加过渡效果 */
			}
			.testPrizeDraw:active {
				transform: scale(0.95); /* 点击时的缩放效果 */
			}
			.testMark{
				width: 80rpx;
				height: 60rpx;
				background: url('../../static/images/qipao1.png') no-repeat;
				background-size: 100% 100%;
				position: absolute;
				top: 0;
				left: 10rpx;
				z-index: 9;
				font-size: 24rpx;
				line-height: 40rpx;
				color: rgba(204, 105, 6, 1);
				text-align: center;
			}
			.PrizeDraw{
				width: 560rpx;
				height: 116rpx;
				background: url('../../static/images/buttom.png') no-repeat;
				background-size: 100% 100%;
				margin: 30rpx 0 0 30rpx;
				font-size: 48rpx;
				font-weight: 700;
				line-height: 98rpx;
				color: rgba(255, 255, 255, 1);
				text-align: center;
				transition: transform 0.3s ease; /* 添加过渡效果 */
			}
			.PrizeDraw:active {
				transform: scale(0.95); /* 点击时的缩放效果 */
			}
			.PrizeDrawMark{
				width: 140rpx;
				height: 70rpx;
				background: url('../../static/images/qipao2.png') no-repeat;
				background-size: 100% 100%;
				// box-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.25);
				position: absolute;
				top: -10rpx;
				left: 590rpx;
				z-index: 9;
				display: flex;
				justify-content: center;
				.PrizeDrawMarkimg{
					width: 36rpx;
					height: 36rpx;
					margin: 6rpx 0 0 0; 
				}
				.text{
					height: 70rpx;
					padding: 0 4rpx 0 0;
					font-size: 26rpx;
					line-height: 48rpx;
					color: rgba(204, 105, 6, 1);
					text-align: left;
				}
			}
		}
		// 中奖动画弹框
		.luckdrawcss{
			width: 100vw;
			height: 100vh;
			background:url('../../static/images/cjbj.png') no-repeat;
			background-size: 100% 100%;
			overflow: hidden;
			position: relative;
			.gifimg{
				width: 100vw;
				height: 100vh;
				background: url('../../static/images/tanzjiang.gif')no-repeat;
				background-size: 100% 100%;
				position: absolute;
				z-index: 2;
			}
			.roll{
				width: 100%;
				height: 520px;
				// background-color: pink;
				background: url('../../static/images/cjk.png') no-repeat;
				background-size: 100% 100%;
				margin: 0 auto;
				margin-top: 80px;
				border: 1px solid transparent;
				// border: 1px solid pink;
				.item-lottry{
					width: 250px;
					height: 340px;
					// background: linear-gradient(187.32deg, rgba(64, 0, 144, 1) 0%, rgba(106, 0, 212, 1) 73.63%, rgba(177, 25, 247, 1) 100%);
					border: 1px solid transparent;
					margin-top: 15px;
					.itemcenter{
						width: 230px;
						height: 325px;
						margin: 0 10px;
						// background: linear-gradient(187.32deg, rgba(64, 0, 144, 1) 0%, rgba(106, 0, 212, 1) 73.63%, rgba(177, 25, 247, 1) 100%);
						border-radius: 8px;
						// border: 1px solid black;
						.img1{
							width: 170px;
							height: 170px;
							display: block;
							margin: 0 auto;
							// margin-top: 30rpx;
							padding-top: 35px;
						}
						.text{
							width: 220px;
							height: 50px;
							font-size: 16px;
							line-height: 25px;
							font-weight: 300;
							color: rgba(255, 255, 255, 1);
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2; /* 控制显示行数 */
							overflow: hidden;
							text-overflow: ellipsis;
							margin: 0 auto;
							margin-top: 15px;
						}
						.usamoney{
							width: 200px;
							height: 30px;
							font-size: 20px;
							line-height: 30px;
							color: rgba(255, 255, 255, 1);
							text-align: center;
							margin: 0 auto;
							margin-top: 15px;
						}
					}
				}
			}
			.countDown{
				width: 750rpx;
				height: 70rpx;
				font-size: 36rpx;
				line-height: 70rpx;
				color: rgba(255, 255, 255, 1);
				text-align: center;
				margin-top: 20px;
				span{
					font-size: 60rpx;
				}
			}
			.close{
				width: 60rpx;
				height: 60rpx;
				margin: 60rpx 0 0 350rpx;
			}
		}
		// 中奖弹框
		.Winningpopup{
			width: 100vw;
			height: 100vh;
			background:url('../../static/images/zjbj.png') no-repeat;
			background-size: 100% 100%;
			position: relative;
			.Prizename{
				width: 750rpx;
				height: 100rpx;
				text-shadow: 0px 0px 14px  rgba(158, 104, 20, 1);
				font-size: 60rpx;
				font-weight: 700;
				line-height: 100rpx;
				color: rgba(254, 240, 277, 1);
				text-align: center;
				padding-top: 120rpx;
			}
			.Prizeitem{
				width: 560rpx;
				height: 670rpx;
				border-radius: 8px;
				background: linear-gradient(135.98deg, rgba(218, 194, 226, 1) 0%, rgba(245, 141, 76, 1) 73.63%, rgba(255, 185, 115, 1) 100%);
				border: 1px solid rgba(255, 185, 115, 1);
				margin: 0 auto;
				margin-top: 90rpx;
				.Prizeimg{
					width: 540rpx;
					height: 540rpx;
					border-radius: 8px;
					padding-top: 10rpx;
					background: linear-gradient(135.49deg, rgba(244, 228, 223, 1) 0%, rgba(244, 234, 222, 1) 43.32%, rgba(247, 233, 224, 1) 100%);
					margin: 10rpx;
					.img{
						width: 440rpx;
						height: 440rpx;
						display: block;
						margin: 0 auto;
						margin-top: 40rpx;
					}
				}
				.Prizesdetil{
					width: 540rpx;
					height: 100rpx;
					font-size: 32rpx;
					line-height: 90rpx;
					color: rgba(255, 255, 255, 1);
					text-align: center;
				}
			}
			.explain{
				width: 700rpx;
				height: 50rpx;
				font-size: 32rpx;
				font-weight: 700;
				line-height: 50rpx;
				color: rgba(255, 255, 255, 1);
				text-align: center;
				margin: 0 auto;
				margin-top: 50rpx;
			}
			.confirm{
				width: 480rpx;
				height: 100rpx;
				border-radius: 5px;
				background: linear-gradient(131.25deg, rgba(193, 150, 242, 1) 0%, rgba(141, 109, 220, 1) 49.31%, rgba(125, 103, 211, 1) 100%);
				border: 1px solid rgba(254, 234, 155, 1);
				margin: 0 auto;
				margin-top: 40rpx;
				font-size: 40rpx;
				line-height: 100rpx;
				color: rgba(255, 255, 255, 1);
				text-align: center;
			}
			.close{
				width: 60rpx;
				height: 60rpx;
				margin: 60rpx 0 0 350rpx;
			}
		}
		// 金币不足
		.insufficientpopup{
			width: 720rpx;
			// height: 680rpx;
			background: linear-gradient(180deg, rgba(252, 243, 204, 1) 0%, rgba(255, 255, 255, 1) 19.82%);
			border-radius: 20rpx;
			padding-bottom: 20rpx;
			position: relative;
			.plaque{
				width: 260rpx;
				height: 200rpx;
				background: url('../../static/images/金堆.png');
				background-size: 100% 100%;
				position: absolute;
				top: -100rpx;
				left: 240rpx;
			}
			.title{
				width: 700rpx;
				height: 40rpx;
				padding-top: 70rpx;
				margin: 30rpx 0 0 20rpx;
				font-size: 32rpx;
				font-weight: 700;
				line-height: 40rpx;
				color: rgba(0, 0, 0, 1);
				// border: 1px solid black;
			}
			.product{
				width: 680rpx;
				margin: 0 auto;
				margin-top: 30rpx;
				// border: 1px solid black;
				display: grid;
				grid-template-columns: repeat(3, 1fr); /* 三列，每列等宽 */
				gap: 10px; /* 网格间距 */
				.product_item {
					height: 80rpx;
					border-radius: 10rpx;
					background-color: rgba(240, 240, 240, 1);
					border: 1px solid rgba(240, 240, 240, 1);
					color: white;
					padding: 10px;
					text-align: center;
					font-size: 18px;
					.GoldCoins{
						height: 50rpx;
						display: flex;
						// border: 1px solid black;
						margin-top: -10rpx;
						.gold{
							width: 44rpx;
							height: 44rpx;
							margin-left: 20rpx;
						}
						.goldtext{
							width: 36px;
							height: 24px;
							font-size: 16px;
							line-height: 23.17px;
							color: rgba(44, 44, 44, 1);
						}
					}
					.money{
						height: 40rpx;
						font-size: 28rpx;
						line-height: 40rpx;
						color: rgba(128, 128, 128, 1);	
						text-align: center;
					}
				}
				.active{
					background-color: rgba(255, 242, 242, 1);
					border: 1px solid rgba(250, 134, 17, 1);
				}
			}
			.accept{
				width: 550rpx;
				height: 100rpx;
				opacity: 1;
				border-radius: 30px;
				background: url('../../static/images/buttom.png') no-repeat;
				background-size: 100% 100%;
				font-size: 32rpx;
				line-height: 80rpx;
				color: rgba(255, 255, 255, 1);
				text-align: center;
				margin: 0 auto;
				margin-top:80rpx;
			}
			.close{
				width: 60rpx;
				height: 60rpx;
				position: absolute;
				bottom:-80rpx;
				left: 340rpx;
			}
		}
		// 规则
		.rulepopup{
			width: 660rpx;
			// height: 760rpx;
			background: linear-gradient(180deg, rgba(254, 249, 228, 1) 0%, rgba(255, 243, 212, 1) 100%);
			border-radius: 20rpx;
			position: relative;
			.plaque{
				width: 500rpx;
				height: 80rpx;
				margin: 0rpx 0 0 95rpx;
				background: url('../../static/images/牌匾.png');
				background-size: 100% 100%;
				font-size: 36rpx;
				line-height:84rpx;
				color: rgba(181, 50, 42, 1);
				text-align: center;
				font-weight: 700;
			}
			// 规则说明
			.scllow{
				width: 590rpx;
				height: 650rpx;
				// border: 1px solid black;
				margin: 0rpx 0 80rpx 40rpx;
				overflow: scroll;
				.RuleSubclass{
					width: 590rpx;
					font-size: 26rpx;
					color: rgba(56, 56, 56, 1);
					line-height: 70rpx;

				}
			}
			.title{
				width: 500rpx;
				height: 60rpx;
				font-size: 36rpx;
				font-weight: 700;
				line-height: 60rpx;
				color: rgba(0, 0, 0, 1);
				margin: 0 auto;
				margin-top: 80rpx;
			}
			.imgs{
				width: 570rpx;
				height: 300rpx;
				margin: 45rpx;
				display: flex;
				.imgs_item{
					width: 200rpx;
					height: 200rpx;
					// border: 1px solid black;
					.img1{
						width: 170rpx;
						height: 140rpx;
						margin: 0 0 0 10rpx;
						// border: 1px solid black;
					}
					.text{
						width: 200rpx;
						height: 40rpx;
						font-size: 24rpx;
						font-weight: 700;
						line-height: 40rpx;
						color: rgba(214, 47, 47, 1);
						text-align: center;
					}
				}
				.img2{
					width: 76px;
					height: 20px;
					margin-top: 70rpx;
				}
			}
			.accept{
				width: 560rpx;
				height: 90rpx;
				opacity: 1;
				border-radius: 30px;
				background: rgba(232, 94, 63, 1);
				font-size: 32rpx;
				line-height: 90rpx;
				color: rgba(255, 255, 255, 1);
				text-align: center;
				margin: 0 auto;
				margin-top: 30rpx;
			}
			.close{
				width: 60rpx;
				height: 60rpx;
				position: absolute;
				top: 770rpx;
				left: 300rpx;
				// margin: 420rpx 0 0 300rpx;
			}
		}
		// 规则
		.kefu{
			width: 660rpx;
			// height: 600rpx;
			padding-bottom: 30rpx;
			background: linear-gradient(180deg, rgba(254, 249, 228, 1) 0%, rgba(255, 243, 212, 1) 100%);
			border-radius: 20rpx;
			position: relative;
			.plaque{
				width: 500rpx;
				height: 80rpx;
				margin: 0rpx 0 0 95rpx;
				background: url('../../static/images/牌匾.png');
				background-size: 100% 100%;
				font-size: 36rpx;
				line-height:84rpx;
				color: rgba(181, 50, 42, 1);
				text-align: center;
				font-weight: 700;
			}
			.title{
				width: 500rpx;
				height: 60rpx;
				font-size: 36rpx;
				font-weight: 700;
				line-height: 60rpx;
				color: rgba(0, 0, 0, 1);
				margin: 0 auto;
				margin-top: 20rpx;
				margin-bottom: 20rpx;
			}
			.accept{
				width: 560rpx;
				height: 90rpx;
				opacity: 1;
				border-radius: 30px;
				background: rgba(232, 94, 63, 1);
				font-size: 32rpx;
				line-height: 90rpx;
				color: rgba(255, 255, 255, 1);
				text-align: center;
				margin: 0 auto;
				margin-top: 200rpx;
			}
			.close{
				width: 60rpx;
				height: 60rpx;
				position: absolute;
				bottom: -70rpx;
				left: 300rpx;
				// margin: 420rpx 0 0 300rpx;
			}
		}

	}
	
</style>
